<template>
  <div>
    <a-typography>
      <a-typography-title>Drawer</a-typography-title>
      <a-typography-paragraph strong>
        由于 drawer
        内部代码一般独立成单独文件，推荐独立成组件来进行开发，所以示例都是以独立的文件来进行说明
        独立组件代码，用于写组件内部的内容
      </a-typography-paragraph>
      <a-typography-paragraph>
        <pre>{{ blockContent }}</pre>
        <a-typography-text strong> 页面引用弹窗 </a-typography-text>
        <pre>{{ blockContent2 }}</pre>
      </a-typography-paragraph>
      <a-typography-title :level="3">useDrawer</a-typography-title>
      <a-typography-paragraph>
        useDrawer 用于操作组件 (
        <a-typography-text code>Sketch</a-typography-text>
        and
        <a-typography-text code>Axure</a-typography-text>
        ), to help people create their product prototypes beautifully and
        efficiently.
      </a-typography-paragraph>

      <a-typography-paragraph>
        <ul>
          <li>
            <a-typography-link href="/docs/resources"
              >Resource Download</a-typography-link
            >
          </li>
        </ul>
      </a-typography-paragraph>

      <a-typography-paragraph>
        Press
        <a-typography-text keyboard>Esc</a-typography-text>
        to exit...
      </a-typography-paragraph>

      <a-divider />

      <a-typography-title :level="3">介绍</a-typography-title>
      <a-typography-paragraph>
        register 用于注册 useDrawer，如果需要使用 useDrawer 提供的 api，必须将
        register 传入组件的 onRegister。
      </a-typography-paragraph>
      <a-typography-paragraph>
        原理其实很简单，就是 vue 的组件子传父通信，内部通过
        <a-typography-text mark>emit("register"，instance)</a-typography-text>
        实现。
        <a-typography-text strong>更好的用户体验</a-typography-text>
        。
      </a-typography-paragraph>
      <a-typography-title :level="3">Props</a-typography-title>
      <a-typography-paragraph>
        <ul>
          <li>
            <a-typography-link href="/docs/resources-cn"
              >设计资源</a-typography-link
            >
          </li>
        </ul>
      </a-typography-paragraph>

      <a-typography-paragraph>
        <pre>{{ blockContent }}</pre>
      </a-typography-paragraph>

      <a-typography-paragraph> 为此页提供修改建议 </a-typography-paragraph>
    </a-typography>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {
      blockContent: `
      <template>
        <BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer>
      </template>
      <script lang="ts">
        import { defineComponent } from 'vue';
        import { BasicDrawer } from '/@/components/Drawer';
        export default defineComponent({
          components: { BasicDrawer },
        });
      <script>`,
      blockContent2: `
       <template>
          <div>
            <Drawer @register="register" />
          </div>
        </template>
        <script lang="ts">
          import { defineComponent } from 'vue';
          import { Alert } from 'ant-design-vue';
          import { useDrawer } from '/@/components/Drawer';
          import Drawer from './Drawer.vue';

          export default defineComponent({
            components: { Drawer },
            setup() {
              const [register, { openDrawer }] = useDrawer();
              return {
                register,
                openDrawer,
              };
            },
          });
        <script>
       `,
    };
  },
});
</script>
